// ignore_for_file: file_names

import 'package:flutter/material.dart';

class GridViewDemo2 extends StatelessWidget {
  const GridViewDemo2({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('GridView案例2'),
        backgroundColor: Colors.red,
      ),
      body: GridView.builder(
        // 主轴(垂直)默认为垂直方向，此属性用于固定侧轴(水平)方向子元素的个数
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 3, // 1.1 设置侧轴方向子元素个数，此时每行展示的子元素个数是固定的
          mainAxisSpacing: 5.0, // 1.2 主轴(垂直)方向子元素间距
          crossAxisSpacing: 15.0, // 1.3 侧轴(水平)方向子元素间距
          childAspectRatio: 4 / 3, // 1.4 子元素宽高比，默认宽高相同 1: 1
        ),
        // 子元素数量
        itemCount: 30,
        // 构造子元素
        itemBuilder: (BuildContext context, int index) {
          return Container(
            color: Colors.lightBlue,
            alignment: Alignment.center,
            child: Text('FLUTTER DART $index'),
          );
        },
      ),
    );
  }
}
